<template>
    <div class="rb-manager">
        <div class="query-form">    
            <!-- 查询区域 -->
            <el-form ref="form" :inline="true" :model="rb">
                <el-form-item label="报销单ID" prop="rbId">
                    <el-input v-model="rb.rbId" placeholder="请输入报销单ID"/>
                </el-form-item>
                <el-form-item label="报销批次ID" prop="upload_id">
                    <el-input v-model="rb.upload_id" placeholder="请输入报销批次ID"/>
                </el-form-item>
                <el-form-item label="是否诈骗" prop="fraud">
                    <el-select v-model="rb.fraud" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="非诈骗" />
                        <el-option :value="1"  label="诈骗" />
                        <el-option :value="2"  label="全选" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否审查" prop="state">
                    <el-select v-model="rb.state" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="未审查" />
                        <el-option :value="1"  label="审查中" />
                        <el-option :value="2"  label="已审查" />
                        <el-option :value="3"  label="全选" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <!-- 列表区域 -->
            <div class="action">
                <!-- <el-button type="primary" @click="handleCreate">新增</el-button> -->
                <el-button type="danger" @click="handlePatchDel" v-has="'rb-patch-delete'">批量删除</el-button>
            </div>
            <el-table :data="rbList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column
                    v-for="item in columns"
                    :key="item.prop"
                    :prop="item.prop" 
                    :label="item.label" 
                    :width="item.width"
                    :formatter="item.formatter"
                    align="center"  
                >
                </el-table-column>
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <!-- <el-button type="primary" size="small" @click="handleEdit(scope.row)" v-has="'rb-edit'">编辑</el-button> -->
                        <el-button type="primary" size="small" @click="handleAddReview(scope.row)" v-has="'rb-review'" :disabled="scope.row.state == 1">加入审查</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.row)" v-has="'rb-delete'">删除</el-button>
                        <el-button type="success" size="small" @click="handleArchive(scope.row)" v-has="'rb-archive'" :disabled="scope.row.state == 1">归档</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                class="pagination"
                background
                layout="prev, pager, next" 
                :total="pager.total || 1"
                :page-size="pager.pageSize"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog
        title="归档报销单"
        v-model="archiveDialogVisible"
        width="40%"
        class="review-dialog"
        @close="handleCloseArchive"
        >
        <el-form ref="archiveDialogForm" :model="archiveForm" label-width="90px" class="compact-form" >
            <el-form-item label="报销单ID" prop="rbId">
                <el-input v-model="archiveForm.rbId" disabled />
            </el-form-item>
            <el-form-item label="受保人编号" prop="MBR_NO">
                <el-input v-model="archiveForm.MBR_NO" disabled />
            </el-form-item>
            <el-form-item label="投保人编号" prop="POHO_NO">
                <el-input v-model="archiveForm.POHO_NO" disabled />
            </el-form-item>
            <el-form-item label="赔付金额" prop="APP_AMT">
                <el-input v-model.number="archiveForm.APP_AMT" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="handleCloseArchive">取消</el-button>
            <el-button type="primary" @click="submitArchive">提交</el-button>
            </span>
        </template>
        </el-dialog>        
    </div>
</template>
  
<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from 'vue'
import utils from '@/utils/utils.js'
export default {
    name:'rbManager',
    setup(){
        // 获取composition api的全局对象
        const { proxy  } = getCurrentInstance();
        // 初始化报销表单对象
        const rb = reactive({
            rbId: '',
            fraud: 2,
            state: 3,
        });
        // 归档弹窗相关数据
        const archiveDialogVisible = ref(false);
        const archiveForm= reactive({
        });
        // 初始化报销单列表数据
        const rbList = ref([

        ]);
        // 初始化分页对象
        const pager = reactive({
            pageNum: 1,
            pageSize: 10,
        })
        // 选中用户列表的对象
        const checkedRbIds = ref([])
        // 定义动态表格-格式，将一些数据格式化成对应的值
        const columns = reactive([
            {
                label:'报销单ID',
                prop: 'rbId',
                width: 150
            },
            {
                label: '报销批次ID',
                prop: 'upload_id',
            },
            // {
            //     label:'上传时间',
            //     prop: 'createTime',
            //     width: 250,
            //     formatter: (row, column, value) => {
            //         return utils.formateDate(new Date(value))
            //     }
            // },
            {
                label:'更新时间',
                prop: 'updateTime',
                formatter: (row, column, value) => {
                    return utils.formateDate(new Date(value))
                }
            },
            {
                label:'是否诈骗',
                prop: 'fraud',
                formatter(row, column, value){
                    return {
                        0: '非诈骗',
                        1: '诈骗'
                    }[value]
                },
            },
            {
                label:'预测概率',
                prop: 'score',
                formatter(row, column, value){
                    return (value*100).toFixed(2) + "%"
                }
            },
            {
                label:'风险等级',
                prop: 'level',
                formatter(row, column, value){
                    return {
                        0: '低风险',
                        1: '中风险',
                        2: '高风险'
                    }[value]
                },
            },
            {
                label:'是否审查',
                prop: 'state',
                formatter(row, column, value){
                    return {
                        0: '未审查',
                        1: '审查中',
                        2: '已审查'
                    }[value]
                },
            },
            
        ])
        // 初始化接口调用
        onMounted(()=>{
            getRbList();
        })
        // 获取报销单列表
        const getRbList = async ()=>{
            let params = { ...rb, ...pager };
            try {
                const { list, page } = await proxy.$api.getRbList(params);
                rbList.value = list;
                pager.total = page.total;
            } catch (error) {}
        }
        // 查询事件，获取用户列表
        const handleQuery = ()=>{
            getRbList();
        }
        // 重置查询表单
        const handleReset = (form)=>{
            proxy.$refs[form].resetFields();
        }
        // 分页事件处理
        const handleCurrentChange = (current)=>{
            pager.pageNum = current;
            getRbList();
        }
        // 报销单加入审查
        const handleAddReview = async (row)=>{
            await proxy.$api.rbAddReview({
                rbId: row.rbId
            })
            proxy.$message.success('加入审查成功');
            getRbList();
        }
        // 打开归档弹窗
        const handleArchive = async (row) => {
            // 复制选中行的数据到弹窗表单
            archiveDialogVisible.value = true;
            console.log(row)
            proxy.$nextTick(() => {
                // 复制行数据到表单
                Object.assign(archiveForm, row);
            })
        };
        // 关闭归档弹窗
        const handleCloseArchive = () => {
            archiveDialogVisible.value = false;
        };
        // 提交归档
        const submitArchive = async () => {
        try {
            // 获取表单数据
            let params = toRaw(archiveForm);
            // 调用后端API提交归档数据
            let res = await proxy.$api.rbArchive(params);
            archiveDialogVisible.value = false;
            proxy.$message.success('归档成功');
            getRbList(); // 刷新列表
        } catch (error) {
            proxy.$message.error('归档失败: ' + error.message);
        }
        };
        // 报销单单个删除
        const handleDel = async (row)=>{
            await proxy.$api.rbDel({
                rbIds: [row.rbId]       //可单个删除，也可批量删除
            })
            proxy.$message.success('删除成功');
            getRbList();
        }
        // 批量删除
        const handlePatchDel = async ()=>{
            if(checkedRbIds.value.length == 0){
                proxy.$message.error('请选择要删除的报销单');
                return;
            }
            const res = await proxy.$api.rbDel({
                rbIds: checkedRbIds.value
            })
            if(res.deletedCount > 0){
                proxy.$message.success('删除成功');
                getRbList();
            }else{
                proxy.$message.error('删除失败');
            }
        }
        // 表格多选
        const handleSelectionChange = (list) => {
            // 选中报销单列表
            let arr = [];
            list.map(item=>{
                arr.push(item.rbId);
            })
            checkedRbIds.value = arr;
        }
        // 报销单新增
        const handleCreate = () => {
            // 设置操作类型
            action.value = 'add';
            // 显示弹框
            showModel.value = true;
        }
        // 报销单编辑弹窗关闭
        const handleClose = ()=>{
            showModel.value = false;
            handleReset('dialogForm');
        }
        // composition api的写法，暴露变量和方法
        return {
            rb,
            rbList,
            columns,
            pager,
            checkedRbIds,
            getRbList,
            archiveDialogVisible,
            archiveForm,
            handleQuery,
            handleReset,
            handleCurrentChange,
            handleDel,
            handlePatchDel,
            handleCreate,
            handleSelectionChange,
            handleClose,
            handleAddReview,
            handleArchive,
            handleCloseArchive,
            submitArchive
        }
    }
}
</script>
  
  
  
<style lang="scss">


.rb-manager{
    .query-form{
        background-color: #ffffff;
        padding: 22px 20px 0;
        border-radius: 5px;
        .el-select{
            width: 80px;
        }
    }
    .base-table{
        border-radius: 5px 5px 0px 0px;
        background: #ffffff;
        padding: 20px;
        border-bottom: 1px solid #e4e8e8;
        .pagination{
            margin-top: 20px;
            display: flex;
            justify-content: flex-end; /* 靠右对齐 */
        }
    }
    .rb-dialog {
        .el-dialog__body {
            padding: 20px 25px 10px;  // 上 左右 下
        }
        .compact-form {
            .el-form-item {
                margin-bottom: 16px;
                
                .el-form-item__label {
                padding-right: 12px;
                color: #606266;
                }
                
                .el-input, .el-select, .el-cascader {
                    width: 100%;
                }
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            padding: 10px 20px 20px;
            .el-button {
                min-width: 80px;
                margin-left: 12px;
            }
        }
    }
}
</style>
  